import React, { PureComponent } from 'react';
import { ListItem, ListInfo, LoadMore } from '../style';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
import { Link } from 'react-router-dom';

class List extends PureComponent {
	render() {
		const { list, page, getMoreList } = this.props
		return (
			<div>
				{list.map((item, index) => {
					return (
						<Link to={'/detail/' + item.get('id')} key={index}>
							<ListItem>
								<img alt='' className='pic' src={item.get('imgUrl')} />
								<ListInfo>
									<h3 className='title'>{item.get('title')}</h3>
									<p className='desc'>{item.get('desc')}</p>
								</ListInfo>
							</ListItem>
						</Link>
					)
				})}
				<LoadMore onClick={() => getMoreList(page)}>更多文字</LoadMore>
			</div>
		)
	}
}

const mapState = (state) => ({
	list: state.get('home').get('articleList'),
	page: state.get('home').get('articlePage')
})

const mapDispatch = (dispatch) => ({
	// 获取更多新闻列表
	getMoreList(page) {
		dispatch(actionCreators.getMoreList(page))
	}
})
export default connect(mapState, mapDispatch)(List)